<script setup lang="ts" name="DownloadImg">
import JSZip from "jszip"
import FileSaver from "file-saver"
import { downloadImgList } from "./downloadImg"
import { computed, reactive } from "vue"
const zhaoList = downloadImgList["zhao"]
const diList = downloadImgList["di"]
const yangList = downloadImgList["yang"]
const obj = reactive({
  showViewer: false,
  resultImg: ""
})
const chengImg = (url: string) => {
  obj.resultImg = url
  obj.showViewer = true
}
const BatchDownload = () => {
  const zip = new JSZip()
  const promises = []
  const zhaoliying = zip.folder("赵丽颖") // 在ZIP文件中创建文件夹
  const dilireba = zip.folder("迪丽热巴")
  const yangying = zip.folder("杨颖")
  let downloadList = zhaoList.concat(diList, yangList)
  downloadList = downloadList.map((element, index) => {
    return {
      id: element.name,
      name: index + ".png",
      url: element.url
    }
  })
  for (const item of downloadList) {
    const promise = getImgArrayBuffer(item.url).then(data => {
      // 下载文件, 并存成ArrayBuffer对象(blob)
      switch (item.id) {
        case "zhao":
          zhaoliying?.file(item.name, data, { binary: true }) //文件夹中添加文件
          break
        case "di":
          dilireba?.file(item.name, data, { binary: true }) //{ binary: true }将二进制文件写入到 ZIP 文件中
          break
        case "yang":
          yangying?.file(item.name, data, { binary: true })
          break
        default:
          break
      }
    })
    promises.push(promise)
  }
  Promise.all(promises)
    .then(() => {
      zip.generateAsync({ type: "blob" }).then(content => {
        // 生成二进制流
        FileSaver.saveAs(content, "签到照片") // 利用file-saver保存文件  自定义文件名
      })
    })
    .catch(res => {})
}
const getImgArrayBuffer = (url: string) => {
  return new Promise((resolve, reject) => {
    //通过请求获取文件blob格式
    const xmlhttp = new XMLHttpRequest()
    xmlhttp.open("GET", url, true)
    xmlhttp.responseType = "blob"
    xmlhttp.onload = function () {
      if (this.status == 200) {
        resolve(this.response)
      } else {
        reject(this.status)
      }
    }
    xmlhttp.send()
  })
}
</script>

<template>
  <div class="card grid-container">
    <el-button type="primary" style="float: right" @click="BatchDownload">下载</el-button>
    <div class="DownloadImg">
      <div class="df">
        <h3>赵丽颖：</h3>
        <span v-for="item in zhaoList">
          <viewer>
            <img :src="item.url" alt="" :key="item.url" @click="chengImg(item.url)" />
          </viewer>
        </span>
      </div>
      <div class="df">
        <h3>迪丽热巴：</h3>
        <span v-for="item in diList">
          <img :src="item.url" alt="" :key="item.url" @click="chengImg(item.url)" />
        </span>
      </div>
      <div class="df">
        <h3>杨颖：</h3>
        <span v-for="item in yangList">
          <img :src="item.url" alt="" :key="item.url" @click="chengImg(item.url)" />
        </span>
      </div>
    </div>
    <el-image-viewer
      v-if="obj.showViewer"
      :hide-on-click-modal="true"
      @close="
        () => {
          obj.showViewer = false
        }
      "
      :url-list="[obj.resultImg]"
    />
  </div>
</template>

<style scoped lang="scss">
@import "./DownloadImg.scss";
</style>
